<script lang="ts">
  import { actixGraphqlEndpoint } from "$lib/js/stores";
  import { request, gql } from "graphql-request";
  import { useQuery } from "@sveltestack/svelte-query";
  import type { Quiz, QuizItem, KV, Nodedge } from "$lib/ebm";
  import { writable } from "svelte/store";

  let endpoint = $actixGraphqlEndpoint;
  const QUIZZES_QUERY = gql`
    query {
      quizzes: listQuizzes {
        id
        seq
        level
        subject
        m3U8 
        title
        description
        createdAt
        updatedAt
        status
        from
      }
    }
  `;

  const queryResult = useQuery<
    Quiz[],
    { message: string }
  >("quizzes", async () => {
    const { quizzes } = await request(endpoint, QUIZZES_QUERY);
    return quizzes;
  });
</script>

<div class="w-full flex flex-col items-center justify-center p-4 bg-gray-300">
  <h1>English Quizzes</h1>
  <div class="flex flex-wrap mb-12 text-left">
    {#if $queryResult.isLoading}
      Loading...
    {:else if $queryResult.isError}
      Error {$queryResult.error.message}
    {:else}
      {#each $queryResult.data as quiz}
        <div
          class="w-full mx-auto lg:w-1/3 max-w-sm rounded overflow-hidden shadow-lg"
        >
          <div class="relative p-6">
            <a href="/quizzes/{quiz.id}">
              <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">
                  {quiz.id} - {quiz.title}
                </div>
                <p class="text-gray-700 text-base">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Voluptatibus quia, nulla! Maiores et perferendis eaque,
                  exercitationem praesentium nihil.
                </p>
              </div>
            </a>
            <div class="px-6 pt-4 pb-2">
              <span
                class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
                >#photography</span
              >
              <span
                class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
                >#travel</span
              >
              <span
                class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
                >#winter</span
              >
            </div>
          </div>
        </div>
      {/each}
    {/if}
  </div>
</div>
